<template>
	<view class="details">
		<navbar title="详情页" bgcolor="#6252DF" txcolor="#ffffff"></navbar>

		<view class="banner-nav">
			<!-- <image class="banner" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/003.png" mode="aspectFit"></image> -->
			<!-- <text class="num">报名人数:{{ detail.xiangqingData.baomingCount }}人</text> -->
			<swiper class="banner" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
				:circular="true">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="main p30">
			<view class="">
				<text class="tips-left fs28"> {{ detail.stageName }} </text>
				<text class="fc222 fs32 bold ml20">{{ detail.title }}</text>
			</view>
			<view class="acea-row row-between-wrapper">
				<view>
					<view class="acea-row row-between-wrapper mt30">
						<view class="acea-row row-middle fc666 fs26">
							<view class="iconfont icon-shijian fs28"></view>
							<view class="ml10">报名时间：{{ detail.stageData.baoming_start_time }} 至
								{{ detail.stageData.baoming_end_time }}</view>
						</view>
					</view>
					<view class="acea-row row-between-wrapper mt20">
						<view class="acea-row row-middle fc666 fs26">
							<view class="iconfont icon-shijian fs28"></view>
							<view class="ml10">评审时间：{{ detail.stageData.pingshen_start_time }} 至
								{{ detail.stageData.pingshen_end_time }}</view>
						</view>
					</view>
				</view>
				<view class="callphone acea-row row-middle row-center" @click="bohao(detail.huodong_phone)">
					<image src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/callphone-icon.png"
						mode="aspectFit"></image>
				</view>
			</view>

			<view class="acea-row row-between-wrapper mt20">
				<view class="pricec fs28">报名费:￥{{ detail.stageData.one_price }}/人</view>
				<view class="bill" @click.stop="competition()">赛程记录</view>
			</view>
			<view class="acea-row row-between-wrapper">
				<view class=" fc222 word-wrap" style="width: 500rpx;">
					<text class="iconfont icon-wxbdingwei fs30 bold"></text>
					<text class="fs30 ml10">{{ detail.baoming_to_address }}</text>
				</view>
				<view class="daohang acea-row row-middle row-center themecolor mt20" @click.stop="openlocation()">
					<text class="iconfont icon-daohang"></text>
					<text class="fs24 ml10">导航</text>
				</view>
			</view>
			<view class="bor-bot mt30 mb30"></view>
			<view>
				<parser :html="detail.content" ref="article"></parser>
			</view>
			<!-- 			<view class="banner02">
				<image class="pic" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/003.png" mode=""></image>
			</view>
			<view class="title fs28">	
				超越巅峰现代音乐国际艺术节创始人为Beyond乐队叶世荣老师。艺术节是针对中国青少年儿童，
				旨在现代音乐为基石，“传承Beyond精神”的全国性现代音乐选拔的活动。北京现代音乐研修学院为超越巅峰艺术节协办单位，
				为艺术节提供专业演出设备与场地等。“超越巅峰·现代音乐国际艺术节”秉持透明严谨，
				公平公正的原则制定八项展演标准体系。让为音乐付出努力的选手获得权威的评选成绩。
				让志同道合的伙伴们一起玩最有趣的Festivel.
			</view> -->
		</view>

		<!-- 		<view class="waring p30">
			抱歉你未晋级成功，省级选手拥有一次参加复活赛得的机会。
		</view> -->
		<view style="width: 100rpx;height: 150rpx;"></view>
		<block v-if="detail.is_fangbang==1 && detail.is_baoming==0">
			<view class="baoming fcwhite fs36">活动已结束</view>
		</block>

		<block v-else>
			<view class="baoming fcwhite fs36" @click="baoming" v-if="detail.is_baoming==0&& detail.stage_id==1">点击报名
			</view>
			<view class="baoming fcwhite fs36" @click="getBaoMing" v-if="detail.is_baoming==0 && detail.stage_id>1">点击报名
			</view>
			<view class="baoming fcwhite fs36" @click="infoclick" v-if="detail.is_baoming==1">查看报名资料</view>
		</block>

		<block v-if="detail.is_pinshen==1">
			<view class="acea-row row-column row-center row-middle pingshenbtn" @click="open">
				<image class="pingshen-icon" src="https://yuchengpic.oss-cn-hangzhou.aliyuncs.com/img/pingshen-icon.png"
					mode="aspectFit"></image>
				<text>评审</text>
			</view>
		</block>

		<view class="pop-bg acea-row row-middle row-center" @click.stop="close()" v-if="xieyishow">
			<view class="xieyi">
				<view class="confrim-title">{{ catename }}</view>
				<view class="text">
					<parser :html="content" ref="article"></parser>
				</view>
				<view class="confirm acea-row row-middle row-center" :class="confrimShow?'confirm-no':''"
					@click.stop="confrim()">
					<text>确认阅读</text>
					<text v-if="seconut">({{ seconut }}s)</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		inletDetails,
		xieyi
	} from '@/api/api.js'
	import {
		getBaoMing,

	} from '@/api/other.js'
	import navbar from '../../components/navbar.vue';
	export default {
		components: {
			navbar,
			parser
		},
		data() {
			return {
				id: '',
				detail: '',
				banner: [],
				seconut: 3,
				timer: null,
				xieyishow: 0,
				catename: '',
				content: '',
				confrimShow: 1,
			};
		},
		onLoad(option) {
			let that = this;
			console.log('option', option);
			if (option.id) {
				console.log('option', option);
				that.id = option.id;
			}
			
			if(option.scene){
				// 获取小程序的启动参数
				const options = uni.getLaunchOptionsSync();
				if (options && options.query) {
					// 判断场景值是否为1047（表示从扫码进入）
					console.log('options.scene', options.scene)
					// if (options.scene == '1047' || options.scene == '1048' || options.scene == '1049' || options.scene == '1001' ) 
					if (options.scene) {
						console.log('该页面是由扫码进入');
						let scene = decodeURIComponent(option.scene);
						console.log('scene', scene);
						var arr = scene.split('&') //参数字符串分割为数组
						var cs = {}
						for (var i = 0; i < arr.length; i++) {
							//遍历数组，拿到json对象
							cs[arr[i].split('=')[0]] = arr[i].split('=')[1]
						}
						console.log('获得穿参数', cs);
						that.id = cs.id;
						this.getdetails();
						this.getxieyi();
					} else {
						console.log('该页面不是由扫码进入');
						that.id = option.id;
						this.getdetails();
						this.getxieyi();
					}
				} else {
					uni.showToast({
						title: '无法获取到启动参数',
						duration: 1500
					});
				}
			}
			
		},
		onShow() {
			let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')
			if (!token) {
				uni.showModal({
					title: '提示',
					content: '未登录，请前往登录',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/users/wechat_login/index'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
			// this.$nextTick(()=>{
			this.getdetails();
			this.getxieyi();
			// })
		},
		methods: {
			getxieyi() {
				xieyi().then(res => {
					this.catename = res.data.catename;
					this.content = res.data.content;
				})
			},
			daojishi() {
				let that = this;
				that.timer = setInterval(() => {
					if (that.seconut == 0) {
						that.confrimShow = 0;
						return clearInterval(that.timer)
					}
					that.seconut = that.seconut - 1;
				}, 1000)
			},
			close() {
				this.xieyishow = 0;
				this.seconut = 3;
				this.confrimShow = 1;
				clearInterval(this.timer)
			},
			open() {
				this.xieyishow = 1;
				this.daojishi();
			},
			confrim() {
				let that = this;
				if (that.confrimShow == 0) return this.pingclick();
			},
			bohao(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getBaoMing() {
				let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')
				if (!token) {
					uni.navigateTo({
						url: '/pages/users/wechat_login/index'
					})
				} else {
					getBaoMing({
						huodong_id: this.detail.huodong_id
					}).then(res => {
						this.fusai()
					}).catch(err => {
						this.$util.Tips({
							title: err
						})
					})
				}
			},
			fusai() {
				uni.navigateTo({
					url: `/pages/home/application-other?huodong_id=${this.detail.huodong_id}&stage_id=${this.detail.stage_id}`
				})
			},
			pingclick() {
				uni.navigateTo({
					url: `/pages/home/comment?id=${this.detail.huodong_id}`
				})
			},
			infoclick() {
				uni.navigateTo({
					url: `/pages/home/application-info?huodong_id=${this.detail.huodong_id}&stage_id=${this.detail.stage_id}`
				})
			},
			openlocation(item) {
				this.$util.openlocation(this.detail.latitude, this.detail.longitude);
			},
			getdetails() {
				inletDetails({
					huodong_id: this.id
				}).then(res => {
					if (res.status == 200) {
						this.detail = res.data.data;
						this.banner = res.data.data.slider_image;
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000
						});
					}

				})
			},
			comment() {
				uni.navigateTo({
					url: '/pages/home/comment'
				})
			},
			competition() {
				uni.navigateTo({
					url: `/pages/home/competition-bill?id=${this.id}`
				})
			},
			baoming() {
				let token = uni.getStorageSync('LOGIN_STATUS_TOKEN')
				if (!token) {
					uni.navigateTo({
						url: '/pages/users/wechat_login/index'
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/info?huodong_id=' + this.detail.huodong_id + '&xiangmu_id=' + this.detail
							.xiangmu_id +
							'&one_price=' + this.detail.stageData.one_price + '&two_price=' + this.detail.stageData
							.two_price +
							'&more_price=' + this.detail.stageData.more_price + '&is_no_check=' + this.detail
							.is_no_check
					})
				}
			}
		},
		// #ifdef MP
		//发送给朋友
		onShareAppMessage(res) {
			// 此处的distSource为分享者的部分信息，需要传递给其他人
			let that = this;
			return {

			};
		},
		//分享到朋友圈
		onShareTimeline() {
			return {

			};
		},
		// #endif
	}
</script>

<style lang="scss">
	.details {
		padding-bottom: 50rpx;

		.pop-bg {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, .3);
			z-index: 999;

			.xieyi {
				width: 690rpx;
				min-height: 690rpx;
				border-radius: 20rpx;
				background-color: #ffffff;
				padding: 30rpx;

				.confrim-title {
					text-align: center;
					color: #333333;
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				.text {
					width: 100%;
					height: 500rpx;
					overflow: auto;
					line-height: 60rpx;
					color: #333333;
					font-size: 30rpx;
				}

				.confirm {
					width: 100%;
					height: 88rpx;
					background: #6252DF;
					color: #ffffff;
					font-size: 30rpx;
					margin-top: 30rpx;
					border-radius: 15rpx;

					&.confirm-no {
						background: #f2f2f2;
						color: #999999;
					}
				}
			}
		}

		.pingshenbtn {
			width: 72rpx;
			height: 208rpx;
			position: fixed;
			bottom: 150rpx;
			right: 0;
			background: rgba(98, 82, 223, 0.88);
			border-radius: 40rpx;
			color: #ffffff;
			font-size: 36rpx;
			text-align: center;
			z-index: 999;

			text {
				writing-mode: vertical-rl;
				margin-top: 10rpx;
			}

			.pingshen-icon {
				width: 42rpx;
				height: 40rpx;
			}
		}

		.banner-nav {
			position: relative;

			.banner {
				width: 100%;
				height: 424rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.swiper-item {
				width: 100%;
				height: 100%;
			}

			.num {
				width: 200rpx;
				height: 60rpx;
				border-radius: 154rpx;
				background: rgba(0, 0, 0, 0.6);
				text-align: center;
				line-height: 60rpx;
				color: #ffffff;
				font-size: 22rpx;
				position: absolute;
				bottom: 80rpx;
				left: 30rpx;
				z-index: 999;
			}
		}

		.main {
			width: 100%;
			border-radius: 20rpx;
			margin-top: -50rpx;
			background-color: #ffffff;
			position: relative;

			.callphone {
				width: 80rpx;
				height: 80rpx;
				background-color: #6252DF;
				border-radius: 50%;

				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.tips-left {
				min-width: 100rpx;
				height: 48rpx;
				border-radius: 20rpx 0 20rpx 0;
				background: #6252DF;
				text-align: center;
				line-height: 48rpx;
				color: #ffffff;
				display: inline-block;
				padding: 0 10rpx;
			}

			.daohang {
				width: 144rpx;
				height: 60rpx;
				border-radius: 68rpx;
				background: rgba(98, 82, 223, 0.3);
			}

			.pic {
				width: 690rpx;
				height: 374rpx;
			}

			.title {
				line-height: 60rpx;
			}


		}

		.baoming {
			width: 100%;
			height: 140rpx;
			background-color: #6252DF;
			text-align: center;
			line-height: 140rpx;
			// margin-top: 50rpx;
			position: fixed;
			bottom: 50rpx;
			left: 0;
			right: 0;
		}

		.bill {
			width: 184rpx;
			height: 60rpx;
			border-radius: 44rpx;
			background: #6252DF;
			color: #ffffff;
			font-size: 28rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.waring {
			color: #FF2B00;
			font-size: 30rpx;
		}

	}
</style>